<template>
  <page-wrap back hide-tab title="简历保存" stay-still>
    <view class="login-wrap">
      <view class="login">
        <view class="login-title">将简历发送至邮箱</view>
        <view class="login-form">
          <u-field :clearable="false" v-model="formData.attName" placeholder="简历名称" placeholder-style="color: #bbbbbb;"
            label-width="0"></u-field>
          <view class="password-input u-border-bottom">
            <input class="input" v-model="formData.email" placeholder="邮箱" placeholder-style="color: #bbbbbb;"
              :clearable="false" label-width="0" @confirm="handleLogin" />
          </view>
          <view class="btnBox">
            <button class="send btn" hover-class="none" @click="handleLogin(1)">
              发送
            </button>
            <button v-if="ifSave == '1'" class="save btn" hover-class="none" @click="handleLogin(2)">
              仅保存到附件
            </button>
          </view>
          <view v-if="ifSave == '1'" class="login-type" @click="returnHome">
            返回主页
          </view>
        </view>
      </view>
      <u-modal v-model="show" @confirm="confirm" title="确认简历信息" :show-cancel-button="true"
        :title-style="{ fontSize: '20px', fontWeight: '600' }">
        <view class="slot-content">
          <view class="confirmContent">{{ formData.attName }}</view>
          <view class="confirmContent" v-if="formData.email">{{
            formData.email
          }}</view>
        </view>
      </u-modal>
    </view>
  </page-wrap>
</template>

<script>
import ShareMixin from "@/mixins/share";
import { personSaveAttachment } from "@/api/modules/resumeCreate";
export default {
  mixins: [ShareMixin],

  data() {
    return {
      isSendEmail: "1",
      show: false,
      formData: {
        attName: "",
        email: "",
        id: "",
      },
      ifSave: "1",
    };
  },
  onLoad(option) {
    console.log(option);
    this.formData.id = option.id;
    this.ifSave = option.ifSave;
  },
  methods: {
    confirm() {
      uni.showLoading({
        title: "正在发送中",
        mask: true,
      });
      let param = {
        isSendEmail: this.isSendEmail,
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        ...this.formData,
      };
      personSaveAttachment(param)
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              icon: "none",
              title: "发送成功",
            });
            setTimeout(() => {
              if (this.ifSave == "1") {
                uni.redirectTo({
                  url: `/pagesSub/resume/resumeTemplate/resumeDetail/sendSuccess?onlySend=1`,
                });
              } else {
                uni.navigateBack({
                  delta: 1,
                });
              }
            }, 1000);
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    handleLogin(isSendEmail) {
      this.isSendEmail = isSendEmail;
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
      if (this.formData.attName == "") {
        return uni.showToast({
          icon: "none",
          title: "简历名称不得为空",
        });
      }
      if (isSendEmail == "1") {
        if (!reg.test(this.formData.email)) {
          return uni.showToast({
            icon: "none",
            title: "邮箱输入不合法",
          });
        }
      }
      this.show = true;
    },
    returnHome() {
      uni.reLaunch({
        url: `/pages/userCenter/index`,
      });
    },
  },
};
</script>

<style lang="scss">
$img-base-login: $img-base + "login/";
.login-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 1rpx;
  background: $uni-bg-color;
  .send-code {
    color: $u-type-primary;
  }
  .eye-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    margin-top: -32rpx;
    margin-bottom: -32rpx;
  }
  .show-psw {
    display: block;
    width: 48rpx;
    height: 48rpx;
    background-image: url($img-base-login + "eye.png");
    background-size: 100% 100%;
    &.password {
      background-image: url($img-base-login + "eyeoff.png");
    }
  }
  .password-input {
    display: flex;
    align-items: center;
    padding: 24rpx 8rpx;
    // #ifdef H5
    padding: 24rpx 8rpx 20rpx;
    // #endif
    input {
      flex-grow: 1;
    }
    // #ifdef H5
    .input {
      flex-grow: 1;
      border: none;
      outline: none;
      font-family: inherit;
      line-height: 48rpx;
      font-size: $uni-font-size-base;
      &::placeholder {
        color: $uni-text-color-placeholder;
      }
    }
    // #endif
  }
  .login {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    .login-title {
      flex-shrink: 0;
      margin: 140rpx 0 120rpx;
      font-size: 56rpx;
      font-weight: bold;
      text-align: center;
    }
    .login-form {
      flex-grow: 1;
      padding: 0 54rpx;
      .u-field {
        padding: 24rpx 0;
      }
      // ::v-deep button {
      //   margin-top: 80rpx;
      // }
      .login-type {
        margin-top: 44rpx;
        font-size: $uni-font-size-lg;
        color: $uni-text-color-555;
        text-align: center;
      }

      .btn-login {
        background: linear-gradient(342deg, #ff5637 0%, #ff7f4e 100%);
        &.disable {
          opacity: 0.5;
        }
      }
    }
  }
  .btnBox {
    margin-top: 80rpx;
    display: flex;
    width: 100%;
    .btn {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      border: 1px solid #f75a3e;
    }
    .send {
      background: #f75a3e;
      color: #fff;
      flex: 1;
    }
    .save {
      background: #fff;
      color: #f75a3e;
      width: 300rpx;
      margin-left: 20rpx;
    }
  }
}
.confirmContent {
  text-align: center;
  margin: 20rpx;
  font-size: 13px;
}
</style>
